<template>
  <a-card :bordered="false">
    <!-- 查询区域 -->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="文件名称">
              <a-input placeholder="请输入文件名称" v-model="queryParam.title"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <a-form-item label="文件后缀">
              <a-input placeholder="请输入文件后缀" v-model="queryParam.docExtension"></a-input>
            </a-form-item>
          </a-col>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
              <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
              <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!-- 查询区域-END -->
    <!-- 操作按钮区域 -->
    <!-- table区域-begin -->
    <div>
      <a-table
        ref="table"
        size="middle"
        :scroll="{x:true}"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :rowSelection="{selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
        class="j-table-force-nowrap"
        @change="handleTableChange">
        <span slot="action" slot-scope="text, record">
          <a @click="handleDownload(record)">下载</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">更多 <a-icon type="down" /></a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a @click="fileLook(record)">预览</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </a-table>
    </div>
  </a-card>
</template>

<script>

  import '@/assets/less/TableExpand.less'
  import { mixinDevice } from '@/utils/mixin'
  import { JeecgListMixin } from '@/mixins/JeecgListMixin'
  import { httpAction, getAction, uploadAction, getFileAccessHttpUrl, downloadFile, deleteAction } from '@/api/manage'

  export default {
    name: 'PmDestinationFilesDetail',
    mixins: [JeecgListMixin, mixinDevice],
    components: {
    },
    props: {
      multiple:{
        type: Boolean,
        default: false
      },
      mainId: {
        type: String,
        default: '',
        required: false
      }
    },
    data () {
      return {
        description: '交付物文件列表管理页面',
        // 表头
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key:'rowIndex',
            width:60,
            align:"center",
            customRender:function (t,r,index) {
              return parseInt(index)+1;
            }
          },
          {
            title:'名称',
            align:"center",
            dataIndex: 'title'
          },
          {
            title:'文档类型',
            align:"center",
            dataIndex: 'docType_dictText'
          },
          {
            title:'文件后缀',
            align:"center",
            dataIndex: 'docExtension'
          },
          {
            title:'文件大小（Kb）',
            align:"center",
            dataIndex: 'docSize'
          },
          {
            title:'文件路径',
            align:"center",
            dataIndex: 'docUrl'
          },
          // {
          //   title:'下载次数',
          //   align:"center",
          //   dataIndex: 'downCount'
          // },
          {
            title: '操作',
            dataIndex: 'action',
            align:"center",
            fixed:"right",
            width:147,
            scopedSlots: { customRender: 'action' }
          }
        ],
        url: {
          list: "/pm/hfPmDestinationFiles/queryByRecordId",
          delete: "/pm/hfPmDestinationFiles/delete",
          deleteBatch: "/pm/hfPmDestinationFiles/deleteBatch",
          exportXlsUrl: "/pm/hfPmDestinationFiles/exportXls",
          importExcelUrl: "pm/hfPmDestinationFiles/importExcel",
          upload: '/jeecg-boot/pm/hfPmDestinationFiles/uploadFile',
          uoloadAfter: '/pm/hfPmDestinationFiles/uploadAfter',
          download: '/pm/hfPmDestinationFiles/download',
          doPreview: '/pm/hfPmDestinationFiles/doPreview'
        },
        dictOptions:{},
        FileList:[],
        model: {}
      }
    },
    watch:{
      mainId:{
        immediate: true,
        handler(val) {
          if(!this.mainId){
            this.clearList()
          }else{
            this.queryParam['recordId'] = val
            this.loadData(1);
          }
        }
      }
    },
    methods: {
      //  上传附件
      uploadAfter(info) {
        let fileName = info.file.name
        let parameter = {
          recordId: this.mainId,
          title: fileName
        }
        getAction(this.url.uoloadAfter, parameter).then((res) => {
          if (res.success) {
            this.loadData()
          }
        })
      },
      //  附件下载
      handleDownload(record) {
        let fileName = record.title
        let parameter = {
          id: record.id
        }
        downloadFile(this.url.download, fileName, parameter);
      },
      handleDelete: function (id) {
        if(!this.url.delete){
          this.$message.error("请设置url.delete属性!")
          return
        }
        var that = this;
        deleteAction(that.url.delete, {id: id}).then((res) => {
          if (res.success) {
            that.$message.success(res.message);
            that.loadData();
          } else {
            that.$message.warning(res.message);
          }
        });
      },
      //  附件预览
      fileLook(record) {
        let Base64 = require('js-base64').Base64;
        // let baseUrl = 'http://127.0.0.1:8080/jeecg-boot/sys/common/static/';
        let baseUrl = window._CONFIG['staticDomainURL'] + "/";
        let path = record.docUrl;
        var url = baseUrl + path;
        var icmfilePreviewURL = window._CONFIG['icmfilePreviewURL'];
        // window.open('http://127.0.0.1:8012/onlinePreview?url=' + encodeURIComponent(Base64.encode(url)));
        window.open(icmfilePreviewURL + '?url=' + encodeURIComponent(Base64.encode(url)));
      },
      searchReset() {
        this.queryParam = {
        }
        this.queryParam['recordId'] = this.mainId
        this.loadData(1);
      },
    }
  }
</script>
<style scoped>
  @import '~@assets/less/common.less';
</style>